<%@ page contentType="text/html;charset=utf-8"  language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<jsp:include page="../header.jsp" />

<jsp:include page="../navbar.jsp" />

<div class="container-fluid container-margin-top">
	<div class="row">
		<div class="col-lg-2 col-sm-3">
			<jsp:include page="sidebar.jsp" />
		</div>
	 
						<div class="col-lg-10 col-sm-9">
					<div class="row">   
						<div class="col-sm-12">
							<div class="dialog dialog-info">
								<h4>签退查询</h4>
								<div class="row">
									<form role="form" action="<c:url value="/manage/signout.do"/>" method="get">
										<div class="form-group col-sm-6 col-md-4">
											<label class="control-label">开始日期</label> 
											<div class="input-group">
												<span class="input-group-btn">
													<button class="btn" type="button"><span class="fui-calendar"></span></button>
												</span>
												<input type="text" class="form-control" id="datepicker-01" name="start_date" value="<fmt:formatDate value="${startDate}" pattern="yyyy-MM-dd"/>"/>
											</div>      
										</div>
										<div class="form-group col-sm-6 col-md-4">
											<label class="control-label">结束日期</label> 
											<div class="input-group">
												<span class="input-group-btn">
													<button class="btn" type="button"><span class="fui-calendar"></span></button>
												</span>
												<input type="text" class="form-control" id="datepicker-02" name="end_date" value="<fmt:formatDate value="${endDate}" pattern="yyyy-MM-dd"/>"/>
											</div>
										</div>
										<div class="form-group col-sm-6 col-md-4">
											<label class="control-label">　　　　</label>
											<div class="control-content">
											<button class="btn btn-primary btn-block" id="search-btn" type="submit" onclick="onSearch(this)" data-loading-text="查找中。。。">查找</button>
											</div> 
										</div>   
									</form>
								</div>
								<div class="table-responsive">
									<table class="table table-hover table-deep text-left" style="margin-top: 20px;">
										<thead>
											<th>姓名</th>
											<th>日期</th>
											<th>签退</th>
											<th></th>
										</thead>
										<tbody>
											<c:forEach items="${attendList}" var="attend">
												<tr class="<c:if test="${attend.outTime < outTime}">danger</c:if>">
													<td><c:out value="${attend.alias}"></c:out></td>
													<td><fmt:formatDate value="${attend.date}" pattern="yyyy-MM-dd"/></td>
													<td><fmt:formatDate value="${attend.outTime}" pattern="HH:mm:ss"/></td>
													<td>
														<c:choose>
															<c:when test="${attend.outTime < outTime}">
																<span class="fui-cross-circle text-danger"></span>
															</c:when>  
															<c:otherwise>
																<span class="fui-check-circle text-primary"></span>
															</c:otherwise>
														</c:choose>
													</td>
													<td class="text-right">
														<button type="button" class="btn btn-xs btn-primary">说明</button>
													</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
	</div>
</div>

<script>
	document.title = "查询管理-签退查询";

	$(function(){
		 initDatepicker($('#datepicker-01'));
		initDatepicker($('#datepicker-02'));
		function initDatepicker(datepickerSelector){
			 datepickerSelector.datepicker({
				showOtherMonths: true,
				selectOtherMonths: true,
				dateFormat: 'yy-mm-dd',
				yearRange: '-1:+1'
			}).prev('.input-group-btn').on('click', function (e) {
				e && e.preventDefault();
				datepickerSelector.focus();
			});
			$.extend($.datepicker, { _checkOffset: function (inst,offset,isFixed) { return offset; } });

			// Now let's align datepicker with the prepend button
			datepickerSelector.datepicker('widget').css({ 'margin-left': -datepickerSelector.prev('.input-group-btn').find('.btn').outerWidth() + 3 });
		}

		// Focus state for append/prepend inputs
		$('.input-group').on('focus', '.form-control', function () {
			$(this).closest('.input-group, .form-group').addClass('focus');
		}).on('blur', '.form-control', function () {
			$(this).closest('.input-group, .form-group').removeClass('focus');
		});

	});
		 


</script>

<jsp:include page="../footer.jsp" />


